<template>
  <a-modal v-model:visible="visible" :title="title" @cancel="cancel" @ok="handleOk" width="700px">
    <a-form
      :model="form"
      name="horizontal_login"
      layout="inline"
      autocomplete="off"
      :label-col="{ style: { width: '100px' } }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item
        label="用户名"
        name="username"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="form.username" />
      </a-form-item>

      <a-form-item
        label="员工姓名"
        name="realname"
        :rules="[{ required: true, message: '请输入员工姓名!' }]"
      >
        <a-input v-model:value="form.realname" />
      </a-form-item>

      <a-form-item
        label="Password"
        name="password"
        v-if="title === '新增'"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <a-input-password v-model:value="form.password" />
      </a-form-item>

      <a-form-item label="性别" name="sex" :rules="[{ required: true, message: '请输入性别!' }]">
        <a-input v-model:value="form.sex" />
      </a-form-item>

      <a-form-item
        label="部门"
        name="departIds_dictText"
        :rules="[{ required: true, message: '请选择部门!' }]"
      >
        <a-input v-model:value="form.departIds_dictText" />
      </a-form-item>

      <a-form-item
        label="角色分配"
        name="jiaose"
        :rules="[{ required: true, message: '请输入角色!' }]"
      >
        <a-input v-model:value="form.jiaose" />
      </a-form-item>

      <a-form-item
        label="手机号"
        name="phone"
        :rules="[{ required: true, message: '请输入手机号!' }]"
      >
        <a-input v-model:value="form.phone" />
      </a-form-item>

      <a-form-item label="入职日期" name="ruzhiTime">
        <a-date-picker v-model:value="form.ruzhiTime" />
      </a-form-item>

      <a-form-item label="离职日期" name="resignationsTime">
        <a-date-picker v-model:value="form.resignationsTime" />
      </a-form-item>

      <a-form-item label="身份证号" name="idCard">
        <a-input v-model:value="form.idCard" />
      </a-form-item>

      <a-form-item label="家庭住址" name="address">
        <a-input v-model:value="form.address" />
      </a-form-item>

      <a-form-item label="邮箱" name="email">
        <a-input v-model:value="form.email" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { FormState } from './types'
import { cloneDeep } from 'lodash'

const props = defineProps({
  title: {
    // 传入的标题
    type: String
  },
  modelValue: Boolean, // visible
  formState: {
    // 传入的表单数据
    type: Object as PropType<FormState>,
    default: () => {}
  }
})

// 定义自定义事件 更新数据
const emit = defineEmits(['update:modelValue', 'update:formState'])
// 组件自己的visible
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 子组件自己的表单数据  利用computed修改props传入的值
const form = computed({
  get() {
    return cloneDeep(props.formState) // 实时克隆的数据
  },
  set: (value) => emit('update:formState', value)
})

// 点击modal的确定按钮
const handleOk = () => {
  console.log('确定', '调接口')
  console.log(form)
}

// 关闭按钮清空数据
const cloneForm = cloneDeep(props.formState)
const cancel = () => {
  form.value = cloneForm
}
</script>
